/**app.wxss**/

/* 颜色变量 */

/* 行为相关颜色 */
$color-first: #FF6DB3;

/* 文字基本颜色 */

$text-color:#333;
$text-color-inverse:#fff;
$text-color-grey:#999;
$text-color-placeholder: #808080;
$text-color-disable:#c0c0c0;

/* 背景颜色 */
$bg-color:#ffffff;
$bg-color-grey:#f8f8f8;
$bg-color-hover:#f1f1f1;
$bg-color-mask:rgba(0, 0, 0, 0.4);

/* 边框颜色 */
$border-color:#e5e5e5;

/* 尺寸变量 */

/* 文字尺寸 */
$font-size-sm:12px;
$font-size-base:14px;
$font-size-lg:16px;

/* 图片尺寸 */
$img-size-sm:20px;
$img-size-base:26px;
$img-size-lg:40px;

/* 边界半径 */
$border-radius-sm: 2px;
$border-radius-base: 3px;
$border-radius-lg: 6px;
$border-radius-circle: 50%;

/* 水平间距 */
$spacing-row-sm: 5px;
$spacing-row-base: 10px;
$spacing-row-lg: 15px;

/* 垂直间距 */
$spacing-col-sm: 4px;
$spacing-col-base: 8px;
$spacing-col-lg: 12px;

/* 透明度 */

$opacity-disabled: 0.3;

/* 页面公用初始参数 */
page {
  height: 100%;
  display: flex;
  flex-direction: column;
  font-size: $font-size-base;
  background-color: $bg-color-grey;
}

/* 导航栏 */
.nav-wrap {
  width: 100%;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1;
  overflow: hidden;
  background-color: $bg-color;

  .nav-title-wrap {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;

    .nav-title {
      font-size: $font-size-lg;
    }
  }

  .nav-back {
    height: 50%;
    margin-left: $spacing-row-lg;
  }
}

/* 触摸滑动 */
swiper,
swiper-item {
  height: 100%;
  width: 100%;
  display: flex;
  justify-content: center;
}

/* 左右间距 */
.row-padding {
  padding-left: $spacing-row-lg;
  padding-right: $spacing-row-lg;
}

/* 左间距 */
.padding-left {
  padding-left: $spacing-col-lg;
}

/* 右间距 */
.padding-right {
  padding-right: $spacing-col-lg;
}

/* 上间距 */
.padding-top {
  padding-top: $spacing-col-lg;
}

/* 下间距 */
.padding-bottom {
  padding-bottom: $spacing-col-lg;
}

/* 左右间距 */
.row-margin {
  margin-left: $spacing-row-lg;
  margin-right: $spacing-row-lg;
}

/* 左间距 */
.margin-left {
  margin-left: $spacing-col-lg;
}

/* 右间距 */
.margin-right {
  margin-right: $spacing-col-lg;
}

/* 上间距 */
.margin-top {
  margin-top: $spacing-col-lg;
}

/* 下间距 */
.margin-bottom {
  margin-bottom: $spacing-col-lg;
}

/* 基础字体 */
.font-base {
  font-size: $font-size-base;
}

/* 大号字体 */
.font-lg {
  font-size: $font-size-lg;
}

/* 小号字体 */
.font-sm {
  font-size: $font-size-sm;
}

/* 基础反色字体 */
.font-base-inverse {
  font-size: $font-size-base;
  color: $text-color-inverse;
}

/* 大号反色字体 */
.font-lg-inverse {
  font-size: $font-size-lg;
  color: $text-color-inverse;
}

/* 小号反色字体 */
.font-sm-inverse {
  font-size: $font-size-sm;
  color: $text-color-inverse;
}

/* 基础灰色字体 */
.font-base-grey {
  font-size: $font-size-base;
  color: $text-color-grey;
}

/* 大号灰色字体 */
.font-grey-lg {
  font-size: $font-size-lg;
  color: $text-color-grey;
}

/* 小号灰色字体 */
.font-grey-sm {
  font-size: $font-size-sm;
  color: $text-color-grey;
}

/* 基础圆角 */
.border-radius-base {
  border-radius: $border-radius-base;
}

/* 大号基础圆角 */
.border-radius-lg {
  border-radius: $border-radius-lg;
}

/* 小号基础圆角 */
.border-radius-sm {
  border-radius: $border-radius-sm;
}

/* 圆形圆角 */
.border-radius-circle {
  border-radius: $border-radius-circle
}

/* 宽高相等图片 */
.square-image-wrap {
  width: 100%;
  height: 0;
  padding-top: 100%;
  position: relative;

  .square-image {
    position: absolute;
    top: 0%;
    left: 0%;
    width: 100%;
    height: 100%;
  }
}

/* 隐藏滚动条 */
::-webkit-scrollbar {
  width: 0;
  height: 0;
  color: transparent;
}

/* 上下布局商品 */
.tb-goods-wrap {

  .goods-img {
    border-radius: $border-radius-base $border-radius-base 0 0;
  }

  .goods-middle-wrap {
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
    padding: $spacing-col-base 4% 0 4%;

    .sold {
      color: $text-color-grey;
      font-size: $font-size-sm;
      margin-top: $spacing-col-sm;
    }
  }

  .goods-bottom-wrap {
    display: flex;
    justify-content: space-between;
    align-items: center;
    box-sizing: border-box;
    padding: $spacing-col-lg 4% 0 4%;

    .cart {
      width: $img-size-base;
      height: $img-size-base;
    }
  }
}

// 商品价格
.price-wrap {
  display: flex;
  align-items: center;

  .price {
    color: $color-first;
  }

  .origin-price {
    color: $text-color-grey;
    font-size: $font-size-sm;
    text-decoration: line-through;
    margin-left: $spacing-row-base;
  }
}

/* 浮在顶部固定 */
.top-fixed {
  position: fixed;
  width: 100%;
  background-color: $bg-color;
  z-index: 1;
}

/* 每行排列四个布局 */
.row-four-item-warp {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  border-radius: $border-radius-base;
  background-color: white;
  box-sizing: border-box;
  padding: $spacing-col-lg $spacing-row-lg;

  .row-four-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: calc(25% - 15px);
    box-sizing: border-box;
    padding-bottom: $spacing-col-lg;

    :nth-last-child(-n+4) {
      padding-bottom: 0;
    }
  }
}

/* 搜索框 */
.search-wrap {
  background-color: white;
  border-radius: 100rpx;
  display: flex;
  justify-content: space-between;
  align-items: center;
  box-sizing: border-box;
  color: $text-color-grey;
  border: 1px $color-first solid;

  .search-before {
    display: flex;
    align-items: center;
    margin-left: $spacing-row-sm;
    margin-right: $spacing-row-sm;
    box-sizing: border-box;
    height: 100%;

    image {
      height: 80%;
    }
  }

  .search-input {
    display: flex;
    align-items: center;
    flex: 1;
    box-sizing: border-box;
    height: 100%;
  }

  .search-after {
    border-radius: 100rpx;
    background-color: $color-first;
    color: $text-color-inverse;
    display: flex;
    justify-content: center;
    align-items: center;
    box-sizing: border-box;
    height: calc(100% - 2px);
    margin-right: 1px;
  }
}